<template>
  <div>
    <div class="dialogPop">
      <el-dialog :visible.sync="addData.dialogAttendTime" :before-close="handleClose" size="small" :span='22' title="考勤时间设置">
        <el-form :model="AttendTime"  ref="AttendTime" label-width="90px" :rules="rules" v-loading="loading">
            <div class="form-item-title">
                <span class="title-level">学生考勤</span>
            </div>
            <div v-for="(site,index) in AttendTime.studentTime" class="areaBoxcon" :key="index">
                <el-row>
                    <el-col :span="3" :offset="1">
                        <span class="time-title">考勤时间段{{index+1}}</span>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="上学时间" :prop="'studentTime.' + index + '.startTime'" :rules="{required: true, type:'date', message: '上学时间不能为空', trigger: 'change'}"> 
                            <el-time-picker
                                format='HH:mm'
                                :editable='false'
                                v-model="site.startTime"
                                style="width:100%"
                                :picker-options="{
                                     selectableRange: getStartRangeStart(site, index)+' - '+getStartRangeEnd(site, index)
                                }"
                                placeholder="上学时间点">
                            </el-time-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="1" style="position:relative">
                        <el-form-item label="放学时间" :prop="'studentTime.' + index + '.endTime'" :rules="{required: true, type:'date', message: '放学时间不能为空', trigger: 'change'}">
                            <el-time-picker
                                format='HH:mm'
                                :editable='false'
                                v-model="site.endTime"
                                style="width:100%"
                                :picker-options="{
                                   selectableRange: getEndRangeStart(site, index)+' - '+getEndRangeEnd(site, index)
                                }"
                                placeholder="放学时间点">
                            </el-time-picker>
                        </el-form-item>
                        <span class="del-btn" @click="delContinue(index)" v-if="index==AttendTime.studentTime.length-1 && index != 0"> 
                            <i class="el-icon-delete"></i>
                        </span>
                    </el-col>
               </el-row>
            </div>
            <span v-if="AttendTime.studentTime.length<3" @click="addContinue" class="addBtn">
                <i class="el-icon-plus"></i> 添加更多
            </span>

            <div class="form-item-title teacherTime">
                <span class="title-level">教师考勤</span>
            </div>
            <div v-for="(site,index) in AttendTime.teacherTime" class="areaBoxcon" :key="index">
                <el-row>
                    <el-col :span="3" :offset="1">
                        <span class="time-title">考勤时间段{{index+1}}</span>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="上班时间" :prop="'teacherTime.' + index + '.startTime'" :rules="{required: true, type:'date', message: '上班时间不能为空', trigger: 'change'}"> 
                            <el-time-picker
                                format='HH:mm'
                                :editable='false'
                                v-model="site.startTime"
                                style="width:100%"
                                :picker-options="{
                                     selectableRange: getStartRangeStart2(site, index)+' - '+getStartRangeEnd2(site, index)
                                }"
                                placeholder="上学时间点">
                            </el-time-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :offset="1" style="position:relative">
                        <el-form-item label="下班时间" :prop="'teacherTime.' + index + '.endTime'" :rules="{required: true, type:'date', message: '下班时间不能为空', trigger: 'change'}">
                            <el-time-picker
                                format='HH:mm'
                                :editable='false'
                                v-model="site.endTime"
                                style="width:100%"
                                :picker-options="{
                                   selectableRange: getEndRangeStart2(site, index)+' - '+getEndRangeEnd2(site, index)
                                }"
                                placeholder="下班时间点">
                            </el-time-picker>
                        </el-form-item>
                        <span class="del-btn" @click="delTeacher(index)" v-if="index==AttendTime.teacherTime.length-1 && index != 0"> 
                            <i class="el-icon-delete"></i>
                        </span>
                    </el-col>
               </el-row>
            </div>
            <el-row v-if="AttendTime.teacherTime.length<3"  class="add-left">
                <el-button @click="addTeacher" type="text"><i class="el-icon-plus"></i> 添加更多</el-button>
            </el-row>
            <div class="attendTime-note">
                <el-col :span="10" :offset="14">
                    友情提示：考勤时间设置完成后于次日生效！
                </el-col>
            </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <p class="btn">
            <el-button @click="resetFormdelDialogAdd('AttendTime')">取 消</el-button>
            <el-button type="primary" @click="addInfor('AttendTime')" :loading="loadingBtn">保 存</el-button>
          </p>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {listAttendanceTime, updateAttendanceTime} from 'api/equipmentMange';
import { mapGetters } from 'vuex';
import moment from 'moment';
export default {
    props: {
        addData: {
            default() {
                return {
                    dialogAttendTime: false // 默认不显示
                }
            },
            required: true
        }
    },
    data() {
        return {
            AttendTime: {
                studentTime: [],
                teacherTime: []
            },
            rules: {},
            loading: false,
            loadingBtn: false // 弹窗的确定按钮状态
        }
    },
    created() {
        // this.getAttendanceTime();
    },
    computed: {
        ...mapGetters([
            'schoolId'
        ])
    },
    methods: {
        
        // 继续添加
        addContinue() {
            let addTime = {
                startTime: '',
                endTime: ''
            }
            this.AttendTime.studentTime.push(addTime);   
        },
        // 继续添加
        addTeacher() {
            let addTime = {
                startTime: '',
                endTime: ''
            }
            this.AttendTime.teacherTime.push(addTime);   
        },
        // 删除按钮
        delContinue(index) {
            this.$confirm('确定删除该时间段？', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                this.AttendTime.studentTime.splice(index, 1);
            });
        },
        // 删除按钮
        delTeacher(index) {
            this.$confirm('确定删除该时间段？', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                this.AttendTime.teacherTime.splice(index, 1);
            });
        },
        // 确定修改时间段按钮
        addInfor(addData) {
            this.$refs[addData].validate((valid) => {
                if (valid) {// 验证通过
                    this.updateOpenTime();
                } 
            });
        },
        getAttendanceTime() {
            this.loading = true;
            listAttendanceTime(this.schoolId).then(res => {
                this.loading = false;
                if (res.data.content.result.length==0) {
                    this.AttendTime.studentTime = [
                        {
                            startTime: '',
                            endTime: ''
                        }
                    ]
                } else {
                    this.AttendTime.studentTime = res.data.content.result.map(item => {
                        return {startTime: new Date('2017-1-1 ' + item.sClassStartTime), endTime: new Date('2017-1-1 ' + item.sClassEndTime)}
                    });
                }
                if (res.data.content.results.length==0) {
                    this.AttendTime.teacherTime = [
                        {
                            startTime: '',
                            endTime: ''
                        }
                    ]
                } else {
                    this.AttendTime.teacherTime = res.data.content.results.map(item => {
                        return {startTime: new Date('2017-1-1 ' + item.sClassStartTime), endTime: new Date('2017-1-1 ' + item.sClassEndTime)}
                    });
                }
            }).catch(() => {
                this.loading = false;
            })
        },
        updateOpenTime() {
            var currentDate=moment(new Date()).format('YYYY-MM-DD')+' ';
            for (let i = 0;i<this.AttendTime.studentTime.length;i++) {
                let startTime=Date.parse(currentDate+moment(this.AttendTime.studentTime[i].startTime).format('HH:mm'));
                let endTime=Date.parse(currentDate+moment(this.AttendTime.studentTime[i].endTime).format('HH:mm'));
                if (i>0) {
                    let lastEndTime=Date.parse(currentDate+moment(this.AttendTime.studentTime[i-1].endTime).format('HH:mm'));
                    if (lastEndTime>=startTime) {
                        this.$message(`学生考勤时间段${i+1}的上学时间需要大于时间段${i}的放学时间`);
                        return false;
                    }
                }
                if (startTime>=endTime) {
                    this.$message(`学生考勤时间段${i+1}的放学时间需要大于上学时间`);
                    return false;
                }
            }
            for (let i = 0;i<this.AttendTime.teacherTime.length;i++) {
                let startTime2=Date.parse(currentDate+moment(this.AttendTime.teacherTime[i].startTime).format('HH:mm'));
                let endTime2=Date.parse(currentDate+moment(this.AttendTime.teacherTime[i].endTime).format('HH:mm'));
                if (i>0) {
                    let lastEndTime2=Date.parse(currentDate+moment(this.AttendTime.teacherTime[i-1].endTime).format('HH:mm'));
                    if (lastEndTime2>=startTime2) {
                        this.$message(`教师考勤时间段${i+1}的上班时间需要大于时间段${i}的下班时间`);
                        return false;
                    }
                }
                if (startTime2>=endTime2) {
                    this.$message(`教师考勤时间段${i+1}的下班时间需要大于上班时间`);
                    return false;
                }
                
            }
            // 学生
            let studentFirstStartTime=this.formatTime(this.AttendTime.studentTime[0].startTime);// 第一时段开始
            let studentFirstEndTime=this.formatTime(this.AttendTime.studentTime[0].endTime);// 第一时段结束
            let studentSecondStartTime=this.AttendTime.studentTime[1]?this.formatTime(this.AttendTime.studentTime[1].startTime):'';// 第二时段开始
            let studentSecondEndTime=this.AttendTime.studentTime[1]?this.formatTime(this.AttendTime.studentTime[1].endTime):'';// 第二时段结束
            let studentThirdStartTime=this.AttendTime.studentTime[2]?this.formatTime(this.AttendTime.studentTime[2].startTime):'';// 第三时段开始
            let studentThirdEndTime=this.AttendTime.studentTime[2]?this.formatTime(this.AttendTime.studentTime[2].endTime):'';// 第三时段结束
            // 教师
            let teacherFirstStartTime=this.formatTime(this.AttendTime.teacherTime[0].startTime);// 第一时段开始
            let teacherFirstEndTime=this.formatTime(this.AttendTime.teacherTime[0].endTime);// 第一时段结束
            let teacherSecondStartTime=this.AttendTime.teacherTime[1]?this.formatTime(this.AttendTime.teacherTime[1].startTime):'';// 第二时段开始
            let teacherSecondEndTime=this.AttendTime.teacherTime[1]?this.formatTime(this.AttendTime.teacherTime[1].endTime):'';// 第二时段结束
            let teacherThirdStartTime=this.AttendTime.teacherTime[2]?this.formatTime(this.AttendTime.teacherTime[2].startTime):'';// 第三时段开始
            let teacherThirdEndTime=this.AttendTime.teacherTime[2]?this.formatTime(this.AttendTime.teacherTime[2].endTime):'';// 第三时段结束
            this.loadingBtn=true;
            updateAttendanceTime(
                this.schoolId,
                studentFirstStartTime,
                studentFirstEndTime,
                studentSecondStartTime,
                studentSecondEndTime,
                studentThirdStartTime,
                studentThirdEndTime,
                teacherFirstStartTime,
                teacherFirstEndTime,
                teacherSecondStartTime,
                teacherSecondEndTime,
                teacherThirdStartTime,
                teacherThirdEndTime
            ).then(res => {
                this.loadingBtn=false;
                this.addData.dialogAttendTime=false;
                this.$emit('search', '');
                this.$message.success('保存成功');
            }).catch(() => {
                this.loadingBtn=false;
            });   
        },
        formatTime(time) {
            return moment(time).format('HH:mm')+':00'
        },
        getStartRangeStart(site, index) {
            let time=this.AttendTime.studentTime;
            if (index==0) {
                return '00:00:00'
            } 
            if (index==1) {
                return moment(time[0].endTime || time[0].startTime || '2017-1-1 00:00:00').add(1, 'minutes').format('HH:mm:ss')// 时间段1的结束时间
            }
            if (index==2) {
                return moment(time[1].endTime || time[1].startTime || time[0].endTime || time[0].startTime || '2017-1-1 00:00:00').add(1, 'minutes').format('HH:mm:ss')// 时间段1的结束时间
            }
        },
        getStartRangeEnd(site, index) {
            let time=this.AttendTime.studentTime
            if (index==0) {
                return moment(time[0].endTime || (time[1] && (time[1].startTime || time[1].endTime)) || (time[2] && (time[2].startTime || time[2].endTime)) || '2017-1-1 23:59:59').add(-59, 'seconds').format('HH:mm:ss')
            } 
            if (index==1) {
                return moment(time[1].endTime || (time[2] && (time[2].startTime || time[2].endTime)) || '2017-1-1 23:59:59').add(-59, 'seconds').format('HH:mm:ss')
            }
            if (index==2) {
                return moment(time[2].endTime || '2017-1-1 23:59:59').add(-59, 'seconds').format('HH:mm:ss')// 时间段1的结束时间
            }
        },
        getEndRangeStart(site, index) {
            let time=this.AttendTime.studentTime
            if (index==0) {
                return moment(time[0].startTime || '2017-1-1 00:00:00').add(1, 'minutes').format('HH:mm:ss')// 时间段1的结束时间
            } 
            if (index==1) {
                return moment(time[1].startTime || time[0].endTime || time[0].startTime || '2017-1-1 00:00:00').add(1, 'minutes').format('HH:mm:ss')// 时间段1的结束时间
            }
            if (index==2) {
                return moment(time[2].startTime || time[1].endTime || time[1].startTime || time[0].endTime || time[0].startTime || '2017-1-1 00:00:00').add(1, 'minutes').format('HH:mm:ss')// 时间段1的结束时间
            }
        },
        getEndRangeEnd(site, index) {
            let time=this.AttendTime.studentTime;
            if (index==0) {
                return moment((time[1] && (time[1].startTime || time[1].endTime)) || (time[2] && (time[2].startTime || time[2].endTime)) || '2017-1-1 23:59:59').add(-59, 'seconds').format('HH:mm:ss')// 时间段1的结束时间
            } 
            if (index==1) {
                return moment((time[2] && (time[2].startTime || time[2].endTime)) || '2017-1-1 23:59:59').add(-59, 'seconds').format('HH:mm:ss')
            }
            if (index==2) {
                return '23:59:59'// 时间段1的结束时间
            }
        },


        getStartRangeStart2(site, index) {
            let time=this.AttendTime.teacherTime;
            if (index==0) {
                return '00:00:00'
            } 
            if (index==1) {
                return moment(time[0].endTime || time[0].startTime || '2017-1-1 00:00:00').add(1, 'minutes').format('HH:mm:ss')// 时间段1的结束时间
            }
            if (index==2) {
                return moment(time[1].endTime || time[1].startTime || time[0].endTime || time[0].startTime || '2017-1-1 00:00:00').add(1, 'minutes').format('HH:mm:ss')// 时间段1的结束时间
            }
        },
        getStartRangeEnd2(site, index) {
            let time=this.AttendTime.teacherTime
            if (index==0) {
                return moment(time[0].endTime || (time[1] && (time[1].startTime || time[1].endTime)) || (time[2] && (time[2].startTime || time[2].endTime)) || '2017-1-1 23:59:59').add(-59, 'seconds').format('HH:mm:ss')
            } 
            if (index==1) {
                return moment(time[1].endTime || (time[2] && (time[2].startTime || time[2].endTime)) || '2017-1-1 23:59:59').add(-59, 'seconds').format('HH:mm:ss')
            }
            if (index==2) {
                return moment(time[2].endTime || '2017-1-1 23:59:59').add(-59, 'seconds').format('HH:mm:ss')// 时间段1的结束时间
            }
        },
        getEndRangeStart2(site, index) {
            let time=this.AttendTime.teacherTime
            if (index==0) {
                return moment(time[0].startTime || '2017-1-1 00:00:00').add(1, 'minutes').format('HH:mm:ss')// 时间段1的结束时间
            } 
            if (index==1) {
                return moment(time[1].startTime || time[0].endTime || time[0].startTime || '2017-1-1 00:00:00').add(1, 'minutes').format('HH:mm:ss')// 时间段1的结束时间
            }
            if (index==2) {
                return moment(time[2].startTime || time[1].endTime || time[1].startTime || time[0].endTime || time[0].startTime || '2017-1-1 00:00:00').add(1, 'minutes').format('HH:mm:ss')// 时间段1的结束时间
            }
        },
        getEndRangeEnd2(site, index) {
            let time=this.AttendTime.teacherTime;
            if (index==0) {
                return moment((time[1] && (time[1].startTime || time[1].endTime)) || (time[2] && (time[2].startTime || time[2].endTime)) || '2017-1-1 23:59:59').add(-59, 'seconds').format('HH:mm:ss')// 时间段1的结束时间
            } 
            if (index==1) {
                return moment((time[2] && (time[2].startTime || time[2].endTime)) || '2017-1-1 23:59:59').add(-59, 'seconds').format('HH:mm:ss')
            }
            if (index==2) {
                return '23:59:59'// 时间段1的结束时间
            }
        },
       // 弹出框的关闭按钮
        handleClose(done) {
            this.$refs['AttendTime'].resetFields();
            this.delDialogAdd();
        },
        resetFormdelDialogAdd(addData) {
            this.$refs[addData].resetFields();
            this.delDialogAdd();
        },
        // 还原弹窗信息
        delDialogAdd() {
            this.addData.dialogAttendTime=false;       
        }
       
    }
}
</script>
<style lang="scss" scoped>
.dialogPop {
    .dialog-title {
        font-size: 20px;
        text-align: center;
        line-height: 1;
        font-size: 16px;
        font-weight: 700;
        color: rgb(61, 41, 31);
        position: relative;
        top: -26px;
        width: -moz-calc(100% - 30px);
        width: -webkit-calc(100% - 30px);
        width: calc(100% - 30px);
    }
    .el-dialog__footer {
        .dialog-footer {
            display: inline-block;
            width: 100%;
            text-align: center;
            padding: 20px 0 60px 0;
        }
    }
    .form-item-title {
        margin: 30px 20px;
        font-size: 14px;
        color: #333;
        line-height: 14px;
        border-left: 4px solid #ff5e2c;
        text-indent: 16px;
        
        .note-css {
        vertical-align: middle;
        display: inline-block;
        width: 4px;
        height: 14px;
        margin-right: 26px;
        border-left: 3px solid #ff5e2c;
        }
        
    }
    .chose {
        display: inline-block;
        height: 36px;
        line-height: 36px;
        color:#ff5e2c;
    }
    .areaBoxcon{
       padding: 0;
    }
    .addBtn{
        margin-left:39px;
        color:#ff5e2c;
        cursor: pointer;
          &:hover{
            color:rgb(255, 126, 86);
        }
        i{
           font-size: 10px;
         } 
    }
    .del-btn {
        display:inline-block;
        width:26px;
        position:absolute;
        right:-40px;
        top:0px;
        line-height: 36px;
        cursor: pointer;
        text-align: center;
    }
    .time-title{
        color:#333;
        font-size:14px;
        height: 38px;
        line-height:38px;
        margin-bottom:12px;
    }
    .teacherTime{
        margin-top:40px !important;
    }
    .attendTime-note{
        color:#666;
        margin-top:20px;
    }
    .add-left{
        padding-left:39px;
    }
}
</style>


